<!-- Generate a nice TOC -->
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tocify/1.9.0/javascripts/jquery.tocify.min.js"></script>
<!-- We do not need the tocify CSS because the asciidoc CSS already provides most of what we neeed -->

<style>
.tocify-subheader {
		font-style: normal;
		font-size: 95%;
}
.tocify ul {
		margin: 0;
}
.tocify-focus {
		background-color: #D3D3D3;
}
.tocify-focus > a {
		color: black;
}
</style>

<script type="text/javascript">
		$(function () {
				// Add a new container for the tocify toc into the existing toc so we can re-use its
				// styling
				$("#toc").append("<div id='generated-toc'></div>");
				$("#generated-toc").tocify({
						extendPage: true,
						context: "#content",
						highlightOnScroll: true,
						hideEffect: "slideUp",
						// Use the IDs that asciidoc already provides so that TOC links and intra-document
						// links are the same. Anything else might confuse users when they create bookmarks.
						hashGenerator: function(text, element) {
								return $(element).attr("id");
						},
						// Smooth scrolling doesn't work properly if we use the asciidoc IDs
						smoothScroll: false,
						// Set to 'none' to use the tocify classes
						theme: "none",
						// Handle book (may contain h1) and article (only h2 deeper)
						selectors: $( "#content" ).has( "h1" ).size() > 0 ? "h1,h2,h3,h4,h5" : "h2,h3,h4,h5",
						ignoreSelector: ".discrete"
				});

				// Switch between static asciidoc toc and dynamic tocify toc based on browser size
				// This is set to match the media selectors in the asciidoc CSS
				// Without this, we keep the dynamic toc even if it is moved from the side to preamble
				// position which will cause odd scrolling behavior
				var handleTocOnResize = function() {
						if ($(document).width() < 768) {
								$("#generated-toc").hide();
								$(".sectlevel0").show();
								$(".sectlevel1").show();
						}
						else {
								$("#generated-toc").show();
								$(".sectlevel0").hide();
								$(".sectlevel1").hide();
						}
				}
				$(window).resize(handleTocOnResize);
				handleTocOnResize();
				// Hide level 4
				$("ul.tocify-subheader[data-tag='4']").hide();
		});
</script>

